<template>
  <form-dialop
    :title="$t('order.orderInstance.changeDesktop')"
    :visible="visible"
    width="35%"
    @handleClose="handleClose"
  >
    <template #content>
      <el-form ref="form" :model="formData" :rules="formRule" label-width="120px" v-loading="loading">
        <el-form-item :label="$t('order.desktopId')" prop="desktopId" name="desktopId">
          <el-input v-model="formData.desktopId" @keyup.enter.native="submit"></el-input>
        </el-form-item>
				<el-form-item :label="$t('order.desktopName')" prop="desktopName" name="desktopName">
          <el-input  v-model="formData.desktopName" @keyup.enter.native="submit"></el-input>
        </el-form-item>
			</el-form>
    </template>
    <template #footer>
      <el-button @click="handleClose">{{ $t('common.cancel') }}</el-button>
      <el-button type="primary" @click="submit" :disabled="loading">{{ $t('common.confirm') }}</el-button>
    </template>
  </form-dialop>
</template>
<script lang="ts">
import Vue from 'vue'
import FormDialop from '../../../../components/Dialog/formDialog.vue';
import { AppModule } from '../../../../store/modules/app';
export default Vue.extend({
  components: {
    FormDialop
  },
  data() {
    return {
      visible: false,
      loading: false,
      language: AppModule.language,
      formData: {
        requestUUID: "",
        desktopId: "",
        desktopName: "",
        workareaUUID: "",
        instanceId: "",
        orderId: "",
        status: "",
        requestType: ""
      },
      allData:'',
      formRule: {
        desktopId: [
          { required: true, message: this.$t('order.formValite.desktopId'), trigger: 'blur' },
          { max: 60, message: (this as any).$t("order.formValite.desktopIdError"), trigger: 'change' }
        ],
        desktopName: [
          { required: true, message: this.$t('order.formValite.desktopName'), trigger: 'blur' },
          { max: 30, message: (this as any).$t("order.formValite.desktopNameError"), trigger: 'change' }
        ]
      }
    }
  },
  created() {
  },
  methods: {
   async init(data: any) {
			this.formData = {
        requestUUID: "",
        desktopId: "",
        desktopName: "",
        workareaUUID: "",
        instanceId: "",
        orderId: "",
        status: "",
        requestType: ""
      };
      this.allData = JSON.parse(JSON.stringify(data.data))
      console.log(data.data);
      this.formData.requestUUID = data.data.requestUUID;
      this.formData.desktopId = data.data.desktopId;
      this.formData.desktopName = data.data.desktopName;
      this.formData.workareaUUID = data.data.workareaUUID;
      this.formData.instanceId = data.data.instanceId;
      this.formData.orderId = data.data.orderId;
      this.formData.status = data.data.status;
      this.formData.requestType = data.data.requestType;
      this.$nextTick(() => {
          if (this.$refs['form']) {
            (this.$refs['form'] as any).clearValidate();
          }
      })
			this.visible = true;
    },
    submit() {
      (this.$refs.form as any).validate((valid: any) => {
        if (valid) {
          this.loading = true;
          (this as any).$orsApi.changeDesktop((this as any).formData).then((res: any) => {
              this.$message.success((this as any).$t('order.orderInstanceDialog.changeDesktopSuccess'));
              this.loading = false;
              this.visible = false;
              this.$emit('success')
            }).catch(()=> {
              this.$message.warning((this as any).$t('order.orderInstanceDialog.changeDesktopFailed'))
              this.loading = false;
            })
        }
      });
    },
    handleClose() {
      this.formData = {
        requestUUID: "",
        desktopId: "",
        desktopName: "",
        workareaUUID: "",
        instanceId: "",
        orderId: "",
        status: "",
        requestType: ""
      },
      this.allData = '';
      this.visible = false;
			this.loading = false;
    }
  }
})
</script>
